<script setup>
import { ref } from 'vue'

const props = defineProps({
  confirmationQuestion: {
    type: String,
    required: true,
  },
})


const isDialogVisible = ref(true)

const emit = defineEmits([
  'closeDialog',
  'confirm',
])



const onConfirmation = () => {
  emit('confirm')
  isDialogVisible.value = false
}

const onCancel = () => {
  emit('closeDialog', 'cancel')
  isDialogVisible.value = false
}
</script>

<template>
  <!-- 👉 Confirm Dialog -->
  <VDialog
    max-width="500"
    :model-value="isDialogVisible"
  >
    <VCard class="text-center px-10 py-6">
      <VCardText>
        <VBtn
          icon
          variant="outlined"
          color="warning"
          class="my-4"
          style=" block-size: 88px;inline-size: 88px; pointer-events: none;"
        >
          <span class="text-5xl">!</span>
        </VBtn>

        <h6 class="text-lg font-weight-medium">
          {{ props.confirmationQuestion }}
        </h6>
      </VCardText>

      <VCardText class="d-flex align-center justify-center gap-2">
        <VBtn
          variant="elevated"
          @click="onConfirmation"
        >
        {{$t('tableOperate.confirm')}}
        </VBtn>

        <VBtn
          color="secondary"
          variant="tonal"
          @click="onCancel"
        >
        {{$t('tableOperate.cancel')}}
        </VBtn>
      </VCardText>
    </VCard>
  </VDialog>
</template>
